import React, { useState } from 'react'


import SideMenu from '../../components/sandBox/SideMenu'
import TopHeader from '../../components/sandBox/TopHeader'

import './NewSandBox.css'

import { Layout, theme } from 'antd'
import NewRouter from '../../components/sandBox/NewRouter'
const { Content } = Layout;


export default function NewSandBox() {
  const [collapsed, setCollapsed] = useState(false)
  const onCollapsedClick = () => {
    setCollapsed(!collapsed);
  };

  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout>

      <SideMenu collapsed={collapsed} />
      <Layout className="site-layout">
        <TopHeader
          collapsed={collapsed}
          onCollapsedClick={onCollapsedClick} />
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            overflow: 'auto',
            background: colorBgContainer,

          }}
        >
          <NewRouter />
        </Content>
      </Layout>


    </Layout>
  )
}
